<template>
  <div id="TreeNavigation">
    <div style="display: flex;width: 100%;height: 100%;border: 1px solid #eee">
      <div style="width: 35%">
        <el-aside width="100%" style="background-color: rgb(238,241,246)">
          <el-menu :router=true :default-active="$route.name">
            <el-submenu index="1">
              <template slot="title"><i class="el-icon-document"></i>图文 </template>
              <el-menu-item-group>
                <!--下边这个可以反复点击传值-->
                <el-menu-item class="menu-item" v-for="(value) in docList" :key="value" :index="value" index="/docRead" v-on:click="showDocDetail(value)">{{value}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title"><i class="el-icon-video-play"></i>视频</template>
              <el-menu-item-group>

                <el-menu-item class="menu-item" v-for="(value) in videoList" :key="value" :index="value" index="/videoPlay" v-on:click="showVideo(value)">{{value}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>

            <el-menu-item index="/DocumentUpload"><i class="el-icon-upload"></i>文档分享</el-menu-item>
            <el-menu-item index="/VideoUpload"><i class="el-icon-upload2"></i>视频分享</el-menu-item>
          </el-menu>
        </el-aside>
      </div>
      <div style="width: 65%;">
        <router-view></router-view>
      </div>
    </div>
  </div>

</template>


<script>
import {eventBus} from "../../../assets/Bus";
export default {
  name: "TreeNavigation",
  created() {
    this.getDocList()
    this.getVideoList()

  },
  data() {
    return {
      docList: this.getDocList(),
      videoList: this.getVideoList()
    };
  },
  methods: {

    showDocDetail(value){
      //传文档名字带时间戳
      eventBus.$emit("showDocDetail", value)
      // this.$router.go(0)
      this.$router.push({path:'/docRead',query:{params:value}})
        // .catch(err => { console.log(err) });
    },
    showdocFullScreen(value){
      // this.$router.go(0)
      this.$router.push({path:'/DocFullScreen',query:{params:value}})
        // .catch(err => { console.log(err) });
    },
    getDocList(){
      var userId = 1;
      var docNameList = [];
      // //从数据库中获取list
      $.ajax({
        url: "http://honglitech.cn:8004/document/getList/"+userId,
        type: "get",
        dataType: "json",
        async : false,
        success: function (result) {
          // var docArr = [];
          const list = result.data
          if(list!=null){
            for(let i in list){
              docNameList.push(list[i].name);
            }
          }else{
            alert("无列表数据！")
          }
        },
        error: function(msg){
          console.log("ajax连接异常："+msg);
        }
      })


      //从本地文件夹获取列表
      //第二参数是是否遍历访问子文件夹
      //服务器路径
      //由于vue将组件访问静态资源的路径配置好了，你可以直接/static来找到static下的文件
      //但是打包后由于逐级访问，还是会找不到静态资源，将/static改成./static
      // var path = '/usr/soft/apache-tomcat-8.5.82/webapps/epidemic/static';
      // const files = require.context('./static/', true, /.pdf$/).keys();
      // const files = require.context('@/assets/src-pdf', true, /.pdf$/).keys();

      //本地路径
      // const files = require.context('/Users/wanghong/IdeaProjects/testweb/static/src-pdf', true, /.pdf$/).keys();

      // console.log(JSON.stringify(docNameList))
      // const files = require.context('../../../../static', true, /.pdf$/).keys();
      // // const files = require.context('../../../assets/doc/', false, /.mp3$/).keys();
      // var docArr = [];
      // //定义存放名称的数组
      // var docNameList = [];
      // for(let i in files){
      //   docArr.push(files[i]);
      // }
      //
      // for(let i = 0; i < docArr.length; i++){
      //   var docName = docArr[i].substring(docArr[i].lastIndexOf('/')+1,docArr[i].length-4);
      //   docNameList.push(docName)
      // }
      // console.log(docNameList)//['CN114253121A', '读书笔记-成为史蒂夫part2_1675583958914']
      return docNameList
    },

    showVideo(value){
      //传文档名字带时间戳
      eventBus.$emit("showVideo", value)
      this.$router.push({path:'/videoPlay',query:{params:value}})
        // .catch(err => { console.log(err) });
    },


    getVideoList(){
      var userId = 1;
      var videoNameList = [];
      // //从数据库中获取list
      $.ajax({
        url: "http://honglitech.cn:8004/video/getList/"+userId,
        type: "get",
        dataType: "json",
        async : false,
        success: function (result) {
          // var docArr = [];
          const list = result.data
          // console.log("list:"+JSON.stringify(list))
          if(list!=null){
            for(let i in list){
              videoNameList.push(list[i].name);
            }
          }else{
            alert("无列表数据！")
          }
        },
        error: function(msg){
          console.log("ajax连接异常："+msg);
        }
      })
      //require.context(),不能传路径变量
      //第二参数是是否遍历访问子文件夹
      //服务器路径
      // '/usr/soft/apache-tomcat-8.5.82/webapps/epidemic/static/src-video';
      // const files = require.context('../../../../static/src-video/', true, /.mp4$/).keys();
      // const files = require.context('../../../../static/', true, /.mp4$/).keys();
      // const files = require.context('@/assets/src-video', true, /.mp4$/).keys();

      //由于vue将组件访问静态资源的路径配置好了，你可以直接/static来找到static下的文件
      //但是打包后由于逐级访问，还是会找不到静态资源，将/static改成./static
      // const files = require.context(require("/usr/soft/apache-tomcat-8.5.82/webapps/epidemic/static/src-video"), true, /.mp4$/).keys();

      //本地路径
      // const files = require.context('/Users/wanghong/IdeaProjects/testweb/static/src-video', true, /.mp4$/).keys();
      // const files = require.context('../../../assets/doc/', false, /.mp3$/).keys();

      // var videoArr = [];
      // var videoNameList = [];
      // for(let i in files){
      //   videoArr.push(files[i]);
      // }
      //
      // for(let i = 0; i < videoArr.length; i++){
      //   var videoName = videoArr[i].substring(videoArr[i].lastIndexOf('/')+1,videoArr[i].length-4);
      //   videoNameList.push(videoName)
      // }

      return videoNameList
    },

    readDirRecur(folder, callback){
      fs.readdir(folder, function(err, files) {
        var count = 0
        var checkEnd = function() {
          ++count == files.length && callback()
        }
        files.forEach(function(file) {
          var fullPath = folder + '/' + file;

          fs.stat(fullPath, function(err, stats) {
            if (stats.isDirectory()) {
              return readDirRecur(fullPath, checkEnd);
            } else {
              /*not use ignore files*/
              if(file[0] == '.') {

              } else {
                fileList.push(fullPath)
              }
              checkEnd()
            }
          })
        })
        //为空时直接回调
        files.length === 0 && callback()
      })
    }
  },
}
</script>

<style scoped>
#TreeNavigation{
  text-align: left;
  color: #2c3e50;
  margin-top: 1px;
  display: flex;
  flex-direction: column;
  height: 100%;
  /*padding-top: 3rem;*/
}
</style>
